<template>
    <div class="mes">
        <a-list class="mes_list" bordered :data-source="data">
            <template #header>
                <div class="flex py4 mes_list_title">
                    <p>标题</p>
                    <p>创建时间</p>
                </div>
            </template>
            <template #renderItem="{ item }">
                <a-list-item @click="router.push({path:'/message/'+item.id})">
                    <p class="m0"><span class="Unread mr1" />{{item.title}}</p>
                    <p class="m0">2021/06/10 20:34:56</p>
                </a-list-item>
            </template>
        </a-list>
        <a-pagination  style="margin:10px auto;text-align:center" v-model:current="current" :total="50" show-less-items />
    </div>
</template>
<script lang='ts'>
import { defineComponent,ref,reactive,toRefs} from 'vue'
import {useRouter} from "vue-router"
interface DataProps {}
export default defineComponent({
    name: '',
    setup(props,context) {
        const router=useRouter()
        const data: object[] = [];
        for(let i=0;i<20;i++){
            data.push({   
                id:i+1,
                title: '你有客户信息未回复.',
            })
        }
        return {
            data,
            current: 2,
            router
        }
   }
});
</script>
<style lang='scss' scoped>
    .mes{
        ::v-deep(.ant-list-header){background-color: #F5F6FA;}
        ::v-deep(.ant-list-item){cursor:pointer}
        &_list{
            background-color: #fff;
            &_title{background-color: #F5F6FA;}
        }
    }
    .Unread{display: inline-block;width: 8px;height: 8px;background-color: $base-color;border-radius: 50%;vertical-align: middle;}
</style>